<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>流程管理</title>
    <link rel="stylesheet" href="/businessProcessManager/js/ele/index.css">
    <link rel="stylesheet" href="/businessProcessManager/css/style.css">
</head>
<body>
<header>
    <img src="/businessProcessManager/images/logo.png" alt="">
    <span class="com-name">业务流程管理平台</span>
</header>
<div>
    <div class="side" id="side">
        <div id="menu" class="menu">
            <el-menu default-active="2" unique-opened class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-menu"></i>业务流程管理</template>
                    <!--<a href="diagram.html"><el-menu-item index="1-2">流程设计器</el-menu-item></a>-->
                   <!-- <a href="/businessProcessManager/html/process.html"><el-menu-item index="1-1">流程管理</el-menu-item></a>
                    <a href="/businessProcessManager/html/process-list.html"><el-menu-item index="1-1">流程定义</el-menu-item></a>
                    <a href="/businessProcessManager/html/sortManager.html"><el-menu-item index="1-2">分类管理</el-menu-item></a>
                    <a href="/businessProcessManager/html/run-task.html"><el-menu-item index="1-3">待办任务</el-menu-item></a>
                    <a href="/businessProcessManager/html/monitor.html"><el-menu-item index="1-3">运行监控</el-menu-item></a>
                    <a href="/businessProcessManager/html/task-entrust.html"><el-menu-item index="1-4">任务委托</el-menu-item></a>
                    <a href="/businessProcessManager/html/model-list.html"><el-menu-item index="1-4">模型管理</el-menu-item></a>-->
                    <!--<a href="user-group.html"><el-menu-item index="1-5">用户分组</el-menu-item></a>
                    <a href="dataAllocation.html"><el-menu-item index="1-6">数据配置</el-menu-item></a>
                    <a href="exampleAllocation.html"><el-menu-item index="1-7">实例配置</el-menu-item></a>-->
                </el-submenu>
            </el-menu>

        </div>
    </div>
    <div class="main-wrapper">
        <div class="nav-bar">
            <span class="position-info">您现在的位置：<a>公文管理</a> &gt; <span class="current-position">公文会签</span></span>
        </div>
        <div class="tool" id="tool">
            <el-button type="primary" @click="add">新增</el-button>
            <el-button @click="del" size="">删除</el-button>
        </div>
        <div class="content-wrapper relative">
            <div id="tree" class="tree-wrapper">
                    <el-tree

                            :data="treeDatas"
                            node-key="id"
                            ref="tree"
                            highlight-current
                            lazy
                            :expand-on-click-node="false"
                            :load="loadNode"
                            @node-click="getKey"
                            :props="defaultProps">
                    </el-tree>
            </div>
            <div class="tabs-lay" id="tabs" style="margin-left: 200px">
                <div class="from-box">
                    <template class="">
                        <el-tabs v-model="activeName" @tab-click="handleClick">
                            <el-tab-pane label="基本信息" name="first">
                                <el-form :model="form1" :inline="true" class="demo-form-inline">
                                    <el-form-item   label="流程编号：" :label-width="formLabelWidth">
                                        <el-input v-model="form1.id"  auto-complete="off"></el-input>
                                    </el-form-item>
                                    <el-form-item   label="流程名称：" :label-width="formLabelWidth">
                                        <el-input v-model="form1.name" auto-complete="off"></el-input>
                                    </el-form-item>
                                    <el-form-item   label="创建时间：" :label-width="formLabelWidth">
                                        <el-input v-model="form1.createTime"  auto-complete="off" >{{form1.createTime |dateFilter}}</el-input>
                                    </el-form-item>
                                    <el-form-item   label="更新时间：" :label-width="formLabelWidth">
                                        <el-input v-model="form1.lastUpdateTime"  auto-complete="off"></el-input>
                                    </el-form-item>
                                    <el-form-item  class="long-text" label="流程描述：" :label-width="formLabelWidth">
                                        <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 1}" v-model="form1.metaInfo"  auto-complete="off"></el-input>
                                    </el-form-item>
                                    <el-form-item   label="版本：" :label-width="formLabelWidth">
                                        <el-input v-model="form1.version"  auto-complete="off"></el-input>
                                    </el-form-item>
                                    <div class="btn-box">
                                        <el-form-item  :label-width="formLabelWidth">
                                            <el-button type="primary" @click="save1"> 保 存 </el-button>
                                            <el-button type="" > 取 消 </el-button>
                                        </el-form-item>
                                    </div>
                                </el-form>
                            </el-tab-pane>
                        </el-tabs>
                    </template>
                </div>
                <div class="expand">
                    <el-button type="" icon="plus">扩展内容</el-button>
                </div>
                <div class="expand">
                    <el-button type="" icon="plus">扩展内容</el-button>
                </div>
            </div>

        </div>
        <div class="foot-biu">
             四川新迎顺信息技术股份有限公司
        </div>
    </div>
</div>
<div id="dialog">
	<!--新增弹框-->
    <el-dialog title="新增" :visible.sync="addFormVisible">
        <el-form :model="addForm" :inline="true" class="demo-form-inline">
            <el-form-item   label="流程名称：" :label-width="formLabe2Width">
                <el-input v-model="addForm.processName" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item   label="流程描述：" :label-width="formLabelWidth">
                <el-input type="textarea" autosize v-model="addForm.describtion"  auto-complete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="addFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addSubmitForm">确 定</el-button>
        </div>
    </el-dialog>
</div>
<!-- 先引入 Vue -->
<script src="/businessProcessManager/js/ele/vue.js"></script>
<script src="/businessProcessManager/js/ele/vue-resource.js"></script>
<script src="/businessProcessManager/js/ele/vue-router.js"></script>
<!-- 引入组件库 -->
<script src="/businessProcessManager/js/ele/index.js"></script>
<script src="/businessProcessManager/js/jquery.min.js"></script>
<script src="/businessProcessManager/js/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="/businessProcessManager/js/date.js"></script>
<!--引入url配置文件-->
<script src="/businessProcessManager/js/config.js"></script>
<script>
    var dateFilter = Vue.filter('dateFilter', function(value) {
        if(value == null || value == undefined || value == "") {
            return "";
        }
        /*var time = new Date(parseInt(value));*/
        return 1;
    });
    //日期格式化
    function formatDates(time){
        return formatDate(new Date(time),'yyyy-MM-dd hh:mm');
    };

    var menu = new Vue({
        el:'#menu',
        methods: {
            handleOpen:function(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose:function(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    })
    //    弹出框
    var dialog = new Vue({
        el: '#dialog',
        data:{
            formLabelWidth: '180px',
            addFormVisible: false,
            addForm: {
            	processName: "",
            	describtion: ""
            },
            formLabe2Width: '180px'
        },
        methods: {
            // 提交新增
            addSubmitForm:function () {
                var that =this;
                var modelId;
                this.$confirm('确认提交吗？', '提示', {
                    type: 'warning'
                }).then(function () {
                    console.log(dialog.addForm);
                    that.$http.post(url+portP+"repository/models",{"name":dialog.addForm.processName}).then(function(data){
                		modelId=data.data.id;
                		var originalUrl ="/activiti/toDiagram?name="+dialog.addForm.processName+"&description="+dialog.addForm.describtion
                            +"&modelId="+modelId;
                          var encodeUrl = encodeURI(originalUrl);
                          console.info(encodeUrl);
                		window.location.href=encodeUrl;
                    });
                    dialog.addFormVisible = false;
                })
            },

        }
    });
    var tool = new Vue({
        el:'#tool',
        data:{
          delData:''
        },
        methods:{
            add:function () {
                dialog.addFormVisible = true;
            },
            del:function () {
                var that =this;
                var delData=this.delData;
                if(this.delData!=''&&this.delData!=undefined){
                    this.$confirm('确认删除编号为'+this.delData+'的流程吗？', '提示', {
                        type: 'warning'
                    }).then(function () {
                        //删除 do something
                        that.$http.delete(url+portC+"actProcess/"+delData).then(function(data){
                    		this.$message({
                                message: data.data,
                                type: 'warning'
                            });
                    	window.location.reload();
                        },function(response){
                            console.info(response);
                            if(response){

                            }
                        });
                    }).catch(function () {
                        //取消
                    })
                }else {
                    this.$message({
                        message: '请选择需要删除的流程！',
                        type: 'warning'
                    });
                }
            }
        }
    })
    //    树形
    var tree = new Vue({
        el: '#tree',
        data: {
        	treeDatas:[],
            defaultProps: {
                label: 'NAME'
            }

        },
        methods: {
            getCheckedNodes:function() {
                console.log(this.$refs.tree.getCheckedNodes());
            },
            getCheckedKeys:function() {
                console.log(this.$refs.tree.getCheckedKeys());
            },
            setCheckedNodes:function() {
                this.$refs.tree.setCheckedNodes([{
                    id: 5,
                    label: '二级 2-1'
                }, {
                    id: 9,
                    label: '三级 1-1-1'
                }]);
            },
            getKey:function (data,node) {
            	   this.$http.get(url+portP+"repository/models/"+data.ID).then(function(data){
            		   tabs.form1 = data.data;
            		   tool.delData = data.data.processCode;
                },function(response){
                    console.info(response);
                    if(response.status==404){
                        tabs.form1 = null;
                    }
                })
                console.log(data);
            },
            setCheckedKeys:function() {
                this.$refs.tree.setCheckedKeys([3]);
            },
            resetChecked:function() {
                this.$refs.tree.setCheckedKeys([]);
            },
            loadNode:function(node,addNode){
            	var pid;
            	if(node.id==0){
            		pid = "-1";
            	}else{
            		pid = node.data.ID;
            	}
                this.$http.get(url+portC+"actProcess",{'pid':pid}).then(function(data){
                	addNode(data.data);
                },function(response){
                    console.info(response);
                    if(response){

                    }
                })
            }
        }
    });
    var tabs = new Vue({
        el:'#tabs',
        data:{
            activeName: 'first',
            formLabelWidth:'180px',
            form1: {
            	id: "",
            	name: "",
                createTime: "",
                lastUpdateTime: "",
                metaInfo: "",
                version: ""
            },
            form2: {
                code: "2312",
                name: "",
                id: "",
                describe: "",
                classify: "",
                parentCode: ""
            },
        },
        methods:{
            handleClick:function(tab, event) {
                console.log(tab, event);
            },
            save1:function () {
            	this.$http.put(url+portP+"repository/models/"+tabs.form1.id,{"name":tabs.form1
                    .name}).then(function(data){
            		this.$message({
                        message: data.data,
                        type: 'warning'
                    });
            		window.location.reload();
                },function(response){
                    console.info(response);
                    if(response){

                    }
                });
            }
        }
    })
</script>
</body>
</html>
